<template>
  <div class="countDown">
    <!-- 预览控制区 -->
    <div class="previewStyle">
      <div class="previewWrap" :style="{background: countDownBg,paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px'}">
        <div class="countDownWrap dis al_item" :class="{dis_ju: formData.styleType !== '0'}" :style="{height: formData.height/2 + 'px'}">
          <span class="countDownText" :style="{color: formData.textColor}">{{ formData.countDownText }}</span>
          <div>
            <u-count-down :separator="isZh" :hide-zero-day="true" :separator-color="formData.textColor" :show-days="showDay" :color="timeColor" :bg-color="timeBgColor" :timestamp="timestamp" />
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑工作区 -->
    <div v-if="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">倒计时</div>
          <el-tabs v-model="tabActive" tab-position="top">
            <el-tab-pane label="内容设置" name="0">
              <div class="contentTitle">显示设置</div>
              <el-form label-position="left" size="mini" :model="formData" label-width="80px">
                <el-form-item label="开始时间">
                  <el-row :gutter="10">
                    <el-col :span="14">
                      <el-date-picker v-model="formData.startDate" :picker-options="startPicker" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
                    </el-col>
                    <el-col :span="10">
                      <el-time-picker v-model="formData.startTime" :picker-options="{selectableRange:timeStartPicker}" value-format="HH:mm:ss" placeholder="选择时间" style="width: 100%;" @focus="timeStartFocus" />
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="结束时间">
                  <el-row :gutter="10">
                    <el-col :span="14">
                      <el-date-picker v-model="formData.endDate" :picker-options="endPicker" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
                    </el-col>
                    <el-col :span="10">
                      <el-time-picker v-model="formData.endTime" value-format="HH:mm:ss" :picker-options="{selectableRange: timeEndPicker}" placeholder="选择时间" style="width: 100%;" @focus="timeEndFocus" />
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="辅助文案">
                  <el-col :span="16">
                    <el-input v-model="formData.countDownText" maxlength="5" show-word-limit placeholder="请输入内容" />
                  </el-col>
                </el-form-item>
                <el-form-item label="显示维度">
                  <div class="dis dis_ju_end al_item">
                    <el-radio-group v-model="formData.showType">
                      <el-radio-button label="0">按小时</el-radio-button>
                      <el-radio-button label="1">按天</el-radio-button>
                    </el-radio-group>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">内容样式</div>
                <div>
                  <div class="dis al_item dis_ju_spb w100e item_mar">
                    <div class="dis al_item">
                      <span>样式</span>
                    </div>
                    <el-radio-group v-model="formData.styleType" size="small">
                      <el-radio-button label="0">样式1</el-radio-button>
                      <el-radio-button label="1">样式2</el-radio-button>
                      <el-radio-button label="2">样式3</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div class="dis al_item">
                      <span>文案颜色</span>
                      <span class="text_mar">{{ formData.textColor }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(1)">重置</div>
                      <el-color-picker
                        v-model="formData.textColor"
                        :show-alpha="false"
                        color-format="hex"
                        size="mini"
                      />
                    </div>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div class="dis al_item">
                      <span>倒计时颜色</span>
                      <span class="text_mar">{{ formData.countDownColor }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(2)">重置</div>
                      <el-color-picker
                        v-model="formData.countDownColor"
                        :show-alpha="false"
                        color-format="hex"
                        size="mini"
                      />
                    </div>
                  </div>
                  <div class="dis al_item dis_ju_spb w100e item_mar">
                    <div class="dis al_item">
                      <span>背景样式</span>
                    </div>
                    <el-radio-group v-model="formData.bgStyleType" size="small">
                      <el-radio-button label="0">纯色</el-radio-button>
                      <el-radio-button label="1">图片</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div v-show="formData.bgStyleType == '0'" class="dis dis_ju_spb al_item w100e item_mar">
                    <div class="dis al_item">
                      <span>背景色</span>
                      <span class="text_mar">{{ formData.bgColor }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(3)">重置</div>
                      <el-color-picker
                        v-model="formData.bgColor"
                        :show-alpha="false"
                        color-format="hex"
                        size="mini"
                      />
                    </div>
                  </div>
                  <div v-show="formData.bgStyleType == '1'" class="dis al_item dis_ju_spb w100e item_mar">
                    <span>背景图</span>
                    <div v-show="!formData.bgImgUrl" class="dis dis_ju al_item uploadWrap" @click="showUpload">
                      <span class="el-icon-plus uploadIcon" />
                    </div>
                    <div v-show="formData.bgImgUrl" class="uploadWrap" @click="showUpload">
                      <img class="wh100e" :src="formData.bgImgUrl" alt="">
                      <div class="imgSize">{{ formData.bgImgWidth }}*{{ formData.bgImgHeight }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="styleWrap">
                <div class="titleStyle">
                  组件样式
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>上边距</span>
                    <span class="text_mar">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>下边距</span>
                    <span class="text_mar">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="progressWrap item_mar">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div>框体高度</div>
                    <div class="flex_1 dis al_item dis_ju_end">
                      <div class="flex_1 progress">
                        <el-slider v-model="formData.height" />
                      </div>
                      <div class="inpWrap">{{ formData.height }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </div>
    <!--我的图片-->
    <chooseImages
      ref="pics"
      :can-choose-images-num="chooseImgNum"
      :max="chooseImgNum"
      @chooseImagesEnd="chooseImgCallBack"
    />
  </div>
</template>

<script>
import index from './index.js'

export default index
</script>
